<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '产能数据',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <PageLayout navTitle="产能数据" backRouteName="people" routeMethod="pushTab">
    <view class="warehouse-section">
      <view class="warehouse-header">
        <text class="warehouse-title">最大仓库容量</text>
        <view class="warehouse-value">{{ maxWarehouseCapacity }} kg</view>
      </view>
      <view class="button-group">
        <button class="action-button save-button">保存</button>
        <button class="action-button edit-button">编辑</button>
        <button class="action-button delete-button">删除</button>
      </view>
    </view>

    <view class="menu-section">
      <wd-cell-group custom-class="shadow-warp" border clickable>
        <template v-for="(item, index) in menuItems" :key="index">
          <wd-cell :title="item.title" is-link @click="handleMenuClick(item)">
            <template #icon>
              <view :class="item.icon" class="menu-icon"></view>
            </template>
            <template #value>
              <view class="cell-value">{{ item.description }}</view>
            </template>
          </wd-cell>
        </template>
      </wd-cell-group>
    </view>
  </PageLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from '@/plugin/uni-mini-router'

defineOptions({
  name: 'HomeProductionCapQua',
  options: {
    styleIsolation: 'shared',
  },
})

// 最大仓库容量初始值，后续接口接入时替换为具体方法
const maxWarehouseCapacity = ref(10000) // 初始值为10000kg

const router = useRouter()

const menuItems = [
  // {
  //   key: 'equipment',
  //   title: '设备清单',
  //   icon: 'cuIcon-file text-cyan',
  //   description: '查看和管理设备信息',
  //   route: 'TblEquipmentListList',
  // },
  {
    key: 'processCapacity',
    title: '产品加工能力',
    icon: 'cuIcon-form text-cyan',
    description: '查看和管理产品加工能力',
    route: 'TblFactoryProcessCapacityList',
  },
]

const handleMenuClick = (item) => {
  router.push({ name: item.route })
}
</script>

<style lang="scss" scoped>
.warehouse-section {
  background-color: #fff;
  margin: 10px;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 1.5px 1.5px 7px #ccc;
}

.warehouse-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.warehouse-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.warehouse-value {
  font-size: 20px;
  font-weight: bold;
  color: #506bff;
}

.button-group {
  display: flex;
  justify-content: space-around;
}

.action-button {
  padding: 8px 20px;
  border-radius: 20px;
  border: none;
  color: white;
  font-size: 14px;
}

.save-button {
  background-color: #506bff;
}

.edit-button {
  background-color: #4caf50;
}

.delete-button {
  background-color: #f44336;
}

.menu-section {
  margin: 10px;
}

.menu-icon {
  font-size: 18px;
  margin-right: 10px;
}

.cell-value {
  color: #888;
  font-size: 12px;
}

:deep(.wd-cell-group) {
  border-radius: 10px;
  overflow: hidden;
  --wot-cell-line-height: 32px;

  .wd-cell {
    --wot-cell-title-fs: 15px;
    --wot-cell-title-color: var(--color-grey);

    .wd-cell__left {
      font-size: 15px;
      display: flex;
      align-items: center;
    }
  }
}

.shadow-warp {
  box-shadow: 1.5px 1.5px 7px #ccc;
}
</style>
